<template>
    <div>
      <li
        :class="{'a-selected':select_id==node.id}"
        class="flex"
        ref="text"
        @click="childClicked(node)"
      >
        <div
          class="icon_box"
          v-if="haveChild"
        >
        <svg
          @click="setExpanded(!isExpanded, $event)"
          t="1709605135944"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2647"
          width="25"
          height="25"
          :class="{rotate:isExpanded}"
          :fill="select_id==node.id?'#1af1f3':'#1af1f3'"
        >
          <path
            d="M500.8 604.779L267.307 371.392l-45.227 45.27 278.741 278.613L779.307 416.66l-45.248-45.248z"
            p-id="2648"
          ></path>
        </svg>
        </div>
        <button class="icon_dep" v-if="haveChild"></button>
        <button class="icon_user" v-if="!haveChild"></button>
        <span :class="{'a-unline':node.online==false}">{{node.name}}</span>
      </li>
      <ul v-if="haveChild&&isExpanded">
        <tree-node
          v-for="child in node.children"
          :key="child.id"
          :node="child"
          :select_id="select_id"
          @node-clicked="childClicked"
        ></tree-node>
      </ul>
    </div>
  </template>
  <script>
  import treeNode from './treeNode.vue'
  export default {
    // 因为是递归组件 导入的时候一定要以懒加载的形式 不然会报错的
    components: {
        treeNode
    },
    data () {
      return {
        // 展开情况
        isExpanded: false
      }
    },
    props: {
      node: Object,
      select_id: {
        type: String,
        default: ''
      }
    },
    computed: {
      // 判断是否可以展开
      haveChild () {
        return this.node.children && this.node.children.length
      }
    },
    methods: {
      // 设置展开情况
      setExpanded (value, event) {
        this.isExpanded = value
        event.stopPropagation()
      },
      // 点击情况
      childClicked (clickedNode) {
        this.$emit('node-clicked', clickedNode)
      }
    }
  }
  </script>
  <style scoped>
  .icon_box {
    width: 30px !important;
    display: flex;
  }
  .icon {
    text-align: center;
    margin-right: 10px;
    transition: all 0.2s ease;
    transform: rotate(-90deg);
  }
  ul {
    list-style: none;
    padding-left: 20px !important;
  }
  .flex {
    display: flex;
    align-items: center;
    padding: 2px 5px;
    user-select: none;
    color:#1af7ff;
    font-size: smaller;
    cursor: pointer;
  }
  .flex a {
    padding: 0 !important;
  }
  .flex:hover {
    background: #485975 !important;
    color: #fff !important;
  }
  .flex:hover a {
    background: #485975 !important;
    color: #fff !important;
  }
  .a-selected,
  .a-selected a {
    background: #485975 !important;
    color: #fff !important;
  }
  .rotate {
    transform: rotate(0);
  }
  .icon_dep{
    background: url('~@/assets/user_status_.png') no-repeat 0px -25px transparent;
    width: 22px;
    height: 22px;
    border: none;
  }
  .icon_user{
    background: url('~@/assets/user_status_.png') no-repeat 0px -75px transparent;
    width: 22px;
    height: 22px;
    border: none;
    margin-left: 10px;
  }
  .a-unline{
    color: #f14a6b;
  }
  </style>
